<template>
  <div class="personal-info">
    <div class="header">
      请在课程学习前完善您的个人信息，您提供的信息将作为划分班级的参考，请务必填写！
    </div>
    <!-- <div class="tip">注意：姓名和身份证号填写后不允许修改，请务必认真填写</div> -->
    <div class="form">
      <div class="item">
        <div class="title">学号</div>
        <div class="content">
          <van-field
            :readonly="true"
            v-model="userForm.studentId"
            type="number"
            placeholder="请输入学号"
            class="inputbox"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">姓名</div>
        <div class="content">
          <van-field
            v-model="userForm.truename"
            placeholder="请输入姓名"
            class="inputbox"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">性别</div>
        <div class="content">
          <van-radio-group v-model="userForm.gender" class="sex">
            <van-radio name="male" shape="square">男性</van-radio>
            <van-radio name="female" shape="square">女性</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="item">
        <div class="title">身份证号码</div>
        <div class="content">
          <van-field
            v-model="userForm.idcard"
            placeholder="请输入身份证号码"
            class="inputbox"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">目前从事行业</div>
        <div class="content">
          <van-field
            v-model="userForm.duties"
            placeholder="请输入从事行业"
            class="inputbox"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">目前职务</div>
        <div class="content">
          <van-field
            v-model="userForm.job"
            placeholder="请输入职务"
            class="inputbox"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">工作所在城市</div>
        <div class="content">
          <van-field
            v-model="userForm.city"
            placeholder="请输入工作所在城市"
            class="inputbox"
          />
        </div>
      </div>
      <div class="item spcial">
        <div class="title">工作年限</div>
        <div class="content">
          <van-radio-group v-model="userForm.workingTime" class="workyear">
            <van-radio
              v-for="workingTime of workingTimes"
              :name="workingTime"
              shape="square"
              :key="workingTime"
              >{{ workingTime }}</van-radio
            >
          </van-radio-group>
        </div>
      </div>
      <div class="item spcial">
        <div class="title">最高学历</div>
        <div class="content">
          <van-radio-group v-model="userForm.education" class="school">
            <van-radio
              v-for="education of educations"
              :name="education"
              shape="square"
              :key="education"
              >{{ education }}</van-radio
            >
          </van-radio-group>
        </div>
      </div>
      <div class="submit-btn" @click="save">确认</div>
    </div>
  </div>
</template>

<script>
import {getUserInfo, setUserInfo} from '@/assets/js/api';
import qs from 'qs';
function validateIdCard(idCard) {
  // 15位和18位身份证号码的正则表达式
  let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
  // 如果通过该验证，说明身份证格式正确，但准确性还需计算
  if (regIdCard.test(idCard)) {
    if (idCard.length === 18) {
      let idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], // 将前17位加权因子保存在数组里
        idCardY = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2], // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
        idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
      for (let i = 0; i < 17; i++) {
        idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
      }
      let idCardMod = idCardWiSum % 11, // 计算出校验码所在数组的位置
        idCardLast = idCard.substring(17); // 得到最后一位身份证号码
      // 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
      if (idCardMod === 2) {
        if (idCardLast.toUpperCase() === 'X') {
          return true;
        } else {
          return false;
        }
      } else {
        // 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
        if (idCardLast + '' === idCardY[idCardMod] + '') {
          return true;
        } else {
          return false;
        }
      }
    }
  }
  return false;
}

export default {
  data() {
    return {
      userId: localStorage.userId,
      workingTimes: ['3年以下', '3-5年', '5-10年', '10年以上'],
      educations: ['小学', '初中', '高中', '大专', '本科', '硕士', '博士'],
      user: {},
      userForm: {
        studentId: '',
        truename: '',
        gender: '',
        idcard: '',
        duties: '',
        job: '',
        city: '',
        workingTime: '',
        education: ''
      }
    };
  },
  mounted() {
    getUserInfo(this.userId).then(user => {
      this.user = user;
      localStorage.userInfo = JSON.stringify(user);
      this.userForm = {...user};
    });
  },
  methods: {
    save() {
      // if (!this.userForm.studentId) {
      //     this.$toast('请输入学号');
      //     return false;
      // }
      if (!this.userForm.truename) {
        this.$toast('请输入姓名');
        return false;
      }
      if (!this.userForm.idcard) {
        this.$toast('请输入身份证号码');
        return false;
      }
      if (!validateIdCard(this.userForm.idcard)) {
        this.$toast('请输入正确的身份证号码');
        return false;
      }
      let profile = {
        truename: this.userForm.truename,
        gender: this.userForm.gender,
        idcard: this.userForm.idcard,
        duties: this.userForm.duties,
        job: this.userForm.job,
        city: this.userForm.city,
        workingTime: this.userForm.workingTime,
        education: this.userForm.education
      };
      setUserInfo(this.user.id, qs.stringify({profile})).then(data => {
        this.$toast('提交成功');
      });
    }
  }
};
</script>

<style lang="less" scoped>
.personal-info {
  background: #ffffff;
  .header {
    background: #4f6bf2;
    height: 170px;
    color: #ffffff;
    padding: 0 50px;
    box-sizing: border-box;
    vertical-align: middle;
    display: table-cell;
    font-size: 30px;
  }
  .tip {
    box-sizing: border-box;
    background: #f9fafd;
    color: #fe0000;
    font-size: 30px;
    vertical-align: middle;
    padding: 10px 50px;
    font-weight: 500;
  }
  .form {
    background: #ffffff;
    padding: 10px 0;
    .item {
      display: flex;
      box-sizing: border-box;
      padding: 40px 32px;
      border-bottom: 1px solid #eeeeee;
      font-size: 30px;
      &:not(.spcial) {
        align-items: center;
      }
      .title {
        width: 260px;
        color: #646566;
        font-weight: bold;
      }
      .content {
        flex: 1;
        text-align: right;
        /deep/ .van-radio__icon .van-icon {
          width: 30px;
          height: 30px;
          margin-top: -6px;
          // line-height: 1.8;
        }
        .sex {
          display: flex;
          height: 50px;
          /deep/.van-radio:last-child {
            margin-left: 140px;
          }
        }
        > .readonly-label {
          text-align: left;
        }
        .workyear,
        .school {
          display: flex;
          flex-wrap: wrap;
          /deep/.van-radio__label {
            width: 140px;
            padding: 10px 0;
            text-align: left;
          }
          /deep/.van-radio {
            margin-left: 30px;
            margin-bottom: 40px;
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        .workyear {
          /deep/.van-radio {
            margin-left: 30px;
            margin-bottom: 40px;
            &:last-child,
            &:nth-child(3) {
              margin-bottom: 0;
            }
          }
        }
        .inputbox {
          font-size: 30px;
          margin-top: -10px;
          /deep/.van-cell {
            padding: 0;
          }
          ::-webkit-input-placeholder {
            /* WebKit, Blink, Edge */
            font-size: 30px;
            line-height: 55px;
          }
        }
      }
    }
    .submit-btn {
      width: 495px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #ffffff;
      background: #4f6bf2;
      border-radius: 20px;
      font-weight: bold;
      font-size: 32px;
      margin: 40px auto;
    }
    .grey {
      color: #c8c9cc;
    }
  }
}
</style>
